<!DOCTYPE html>
<html>
    <head>
        <title>上下级页面流向图</title>
        <meta charset="utf-8">
        <style type="text/css">
		 #container1 {position:absolute;width:33%;height:15%;z-index:1;left:0px;}
		 #container2 {position:absolute;width:33%;height:15%;z-index:2;left:33%;}
		 #container6 {position:absolute;width:33%;height:15%;z-index:3;left:66%;}
		  #container3 {position:absolute;width:33%;height:15%;z-index:1;left:0px;}
		 #container4 {position:absolute;width:33%;height:15%;z-index:2;left:33%;}
		  #container5 {position:absolute;width:33%;height:15%;z-index:3;left:66%;}
		 </style>
        <link rel="shortcut icon" type="image/png" href="${rc.contextPath}/images/favicon.png">
		<link rel="stylesheet" href="${rc.contextPath}/stylesheets/bootstrap.min.css">
		<link rel="stylesheet" href="${rc.contextPath}/stylesheets/bootstrap-theme.min.css">
		<link rel="stylesheet" href="${rc.contextPath}/stylesheets/jquery-ui.min.css">
		<link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
		<script type="text/javascript" src="${rc.contextPath}/javascripts/jquery.2.1.1.min.js"></script>
		<script type="text/javascript" src="${rc.contextPath}/javascripts/bootstrap.min.js"></script>
		<script type="text/javascript" src="${rc.contextPath}/javascripts/bootstrap-datepicker.min.js"></script>
		<script type="text/javascript" src="${rc.contextPath}/javascripts/highcharts.js"></script>
    	<script type="text/javascript">
    	var timeArray=[];
    	var mydata0=new Array();
    	var mydata1=new Array();
    	var mydata2=new Array();
    	var mydata3=new Array();
    	var mydata4=new Array();
    	var mydata5=new Array();
    
    	var data0,data1,data2,data3,data4,data5;
    	function ajaxDate(){
    		  timeArray=[];
	   		  var d = new Date();
	   		  var ms=d.getTime();
	   		  
	   		  $.ajax({
   			   type: "GET",
   			   async:false,
   			   url: "${rc.contextPath}/manGod/ajaxManGodData",
   			   success: function(data){
   				  if(data==null || data.length==0){
  					   $("#container1").hide();
  					 $("#container2").hide();
  					$("#container3").hide();
  					$("#container4").hide();
  					$("#container5").hide();
  					$("#container6").hide();
  					   return;
  				   }
  				   else{
  					$("#container1").show();
  					$("#container2").show();
  					$("#container3").show();
  					$("#container4").show();
  					$("#container5").show();
  					$("#container6").show();
  				   }
   				 mydata0=[];
   		    	 mydata1=[];
   		    	 mydata2=[];
   		    	 mydata3=[];
   		    	 mydata4=[];
   		    	 mydata5=[];
   				    data0=data[0];
   				 	data1=data[1];
   				 	data2=data[2];
   				 	data3=data[3];
   				 	data4=data[4];
   				 	data5=data[5];
   				 	data6=data[6];
   				   for(t=0;t<60;t++){
   					   if(data0[t]==null){
   						data0[t]=0;
   					   }
   					 if(data1[t]==null){
    						data1[t]=0;
    					   }
   					 if(data2[t]==null){
    						data2[t]=0;
    					   }
   					 if(data3[t]==null){
    						data3[t]=0;
    					   }
   					 if(data4[t]==null){
    						data4[t]=0;
    					   }
   					if(data6[t]==null){
						data6[t]=0;
					   }
   				mydata0.push(data0[t]);
   				mydata1.push(data1[t]);
   				mydata2.push(data2[t]);
   				mydata3.push(data3[t]);
   				mydata4.push(data4[t]);
   				mydata5.push(data6[t]);
   				   }
   				console.log('mydata0：', mydata0);
   				console.log('mydata1：', mydata1);
   				console.log('mydata2：', mydata2);
   				console.log('mydata3：', mydata3);
   				console.log('mydata4：', mydata4);
   				console.log('mydata5：', mydata5);
   				 }
  			 
   			});
	   		  
      		for(i=0;i<60;i++){
      			var h=new Date(ms).getHours();
      			var m=new Date(ms).getMinutes();
      			if(m.toString().length==1){
      				m="0"+m;
      			}
      			timeArray.push(h+":"+m);
      			ms-=1000*60;
      		}
      		timeArray.reverse();
      		
      		$('#container1').highcharts({                   //图表展示容器，与div的id保持一致
      	        chart: {
      	            type: 'spline'                         //指定图表的类型，默认是折线图（line）
      	        },
      	        title: {
      	            text: '获取验证码按钮'      //指定图表标题
      	        },
      	        xAxis: {
      	        	 tickInterval: 5, 
                     categories:timeArray
      	              //指定x轴分组
      	        },
      	        yAxis: {
      	            title: {
      	                text: ''                  //指定y轴的标题
      	            }
      	        },
      	      credits:{
              	enabled:false,
            
              },
              legend:{
              	enabled:false
              },
      	        series: [{                                 //指定数据列
      	            name: '次数',                          //数据列名
      	          marker: {
      	        		enabled:true,
                      symbol: 'diamond'
                  },
      	            data: mydata0                       //数据
      	        }]
      	    });
      		
    		$('#container2').highcharts({                   //图表展示容器，与div的id保持一致
      	        chart: {
      	            type: 'spline'                         //指定图表的类型，默认是折线图（line）
      	        },
      	        title: {
      	            text: '立即领取按钮'      //指定图表标题
      	        },
      	        xAxis: {
      	        	 tickInterval: 5, 
                     categories:timeArray
      	              //指定x轴分组
      	        },
      	        yAxis: {
      	            title: {
      	                text: ''                  //指定y轴的标题
      	            }
      	        },
      	      credits:{
                	enabled:false,
              
                },
                legend:{
                  	enabled:false
                  },
      	        series: [{                                 //指定数据列
      	            name: '次数',                          //数据列名
      	          marker: {
      	        	enabled:true,
                      symbol: 'diamond'
                  },
      	            data: mydata1                       //数据
      	        }]
      	    });
    		
    		$('#container3').highcharts({                   //图表展示容器，与div的id保持一致
      	        chart: {
      	            type: 'spline'                         //指定图表的类型，默认是折线图（line）
      	        },
      	        title: {
      	            text: '红包活动页面'      //指定图表标题
      	        },
      	        xAxis: {
      	        	 tickInterval: 5, 
                     categories:timeArray
      	              //指定x轴分组
      	        },
      	        yAxis: {
      	            title: {
      	                text: ''                  //指定y轴的标题
      	            }
      	        },
      	      credits:{
                	enabled:false,
              
                },
                legend:{
                  	enabled:false
                  },
      	        series: [{                                 //指定数据列
      	            name: '次数',                          //数据列名
      	          marker: {
      	        	enabled:true,
                      symbol: 'diamond'
                  },
      	            data: mydata2                      //数据
      	        }]
      	    });
    		
    		$('#container4').highcharts({                   //图表展示容器，与div的id保持一致
      	        chart: {
      	            type: 'spline'                         //指定图表的类型，默认是折线图（line）
      	        },
      	        title: {
      	            text: '弹幕页面'      //指定图表标题
      	        },
      	        xAxis: {
      	        	 tickInterval: 5, 
                     categories:timeArray
      	              //指定x轴分组
      	        },
      	        yAxis: {
      	            title: {
      	                text: ''                  //指定y轴的标题
      	            }
      	        },
      	      credits:{
                	enabled:false,
              
                },
                legend:{
                  	enabled:false
                  },
      	        series: [{                                 //指定数据列
      	            name: '次数',                          //数据列名
      	          marker: {
      	        	enabled:true,
                      symbol: 'diamond'
                  },
      	            data: mydata3                       //数据
      	        }]
      	    });
    		
    		$('#container5').highcharts({                   //图表展示容器，与div的id保持一致
      	        chart: {
      	            type: 'spline'                         //指定图表的类型，默认是折线图（line）
      	        },
      	        title: {
      	            text: '我的红包页面'      //指定图表标题
      	        },
      	        xAxis: {
      	        	 tickInterval: 5, 
                     categories:timeArray
      	              //指定x轴分组
      	        },
      	        yAxis: {
      	            title: {
      	                text: ''                  //指定y轴的标题
      	            }
      	        },
      	      credits:{
                	enabled:false,
              
                },
                legend:{
                  	enabled:false
                  },
      	        series: [{                                 //指定数据列
      	            name: '次数',
      	          marker: {
      	        	enabled:true,
                      symbol: 'diamond'
                  },//数据列名
      	            data: mydata4                       //数据
      	        }]
      	    });
    		
    		
    		
       		$('#container6').highcharts({                   //图表展示容器，与div的id保持一致
      	        chart: {
      	            type: 'spline'                         //指定图表的类型，默认是折线图（line）
      	        },
      	        title: {
      	            text: '吐槽'      //指定图表标题
      	        },
      	        xAxis: {
      	        	 tickInterval: 5, 
                     categories:timeArray
      	              //指定x轴分组
      	        },
      	        yAxis: {
      	            title: {
      	                text: ''                  //指定y轴的标题
      	            }
      	        },
      	      credits:{
                	enabled:false,
              
                },
                legend:{
                  	enabled:false
                  },
      	        series: [{                                 //指定数据列
      	            name: '次数',                          //数据列名
      	          marker: {
      	        	enabled:true,
                      symbol: 'diamond'
                  },
      	            data: mydata5                       //数据
      	        }]
      	    });

    	};
    	$(document).ready(function(event) {
    		ajaxDate();
    		setInterval(ajaxDate,60*1000);
    	});
    	</script>
    </head>
    <body>
    	<div class="container">
    	<div class="row">
    	<div style="min-width: 100%; height: 400px;margin:0 auto;">
			 <div id="container1" style="width: 33%; height: 400px; margin: 0 auto; reflow:true"></div>
			 <div id="container2" style="width: 33%; height: 400px; margin: 0 auto; reflow:true"></div>
			 <div id="container6" style="width: 33%; height: 400px; margin: 0 auto; reflow:true"></div>
		</div>
		<br>
				<div style="min-width: 100%; height: 400px;margin:0 auto;">
			 <div id="container3" style="width: 33%; height: 400px; margin: 0 auto; reflow:true"></div>
			 <div id="container4" style="width: 33%; height: 400px; margin: 0 auto; reflow:true"></div>
			 <div id="container5" style="width: 33%; height: 400px; margin: 0 auto; reflow:true"></div>
				</div>
		</div>
       </div>
   </body>
</html>